<template>
	<!-- 如果有退款 使用渐变色背景色 如果没有退款 使用 f7背景色  -->
	<view class="detail-wrapper" :style="{ background: vdata.refundCount > 0 ? '' : '#f7f7f7' }">
		<view class="detail-main">
			<view class="detail-header">
				<JeepayCustomNavbar :transparent="true" title="订单详情" backCtrl="back" />
				<view style="height: 30rpx"></view>
				<view class="detail-title">
					<view class="title-img"
						:style="{ backgroundColor: datamap.payOrderImage(vdata.orderInfo?.wayCodeType)?.bgColor }">
						<image :src="datamap.payOrderImage(vdata.orderInfo?.wayCodeType)?.imgUrl" mode="scaleToFill" />
					</view>
					<view class="money-wrapper">
						<view class="detail-money">
							<view><text class="icon-money">￥</text>{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
							<image src="/static/iconImg/icon-more.svg" mode="scaleToFill"
								@tap="singlePopupRef.open('refund')" />
						</view>
						<view class="detail-number"> {{ vdata.orderInfo.payOrderId }}</view>
					</view>
				</view>
			</view>
			<br />
			<view class="detail-info bdr-after bdr-before border-f2">
				<view class="detail-item">
					<view class="item-title">交易状态</view>
					<view class="item-info">
						<text class="detail-dot"
							:style="{ backgroundColor: datamap.payOrderState(vdata.orderInfo.state).color }" />
						{{ datamap.payOrderState(vdata.orderInfo.state).text }}
					</view>
				</view>

				<view class="detail-item">
					<view class="item-title">交易门店</view>
					<view class="item-info"> {{ vdata.orderInfo.storeName }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">支付方式</view>
					<view class="item-info"> {{ datamap.payOrderImage(vdata.orderInfo.wayCodeType).title }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">下单应用</view>
					<view class="item-info"> {{ vdata.orderInfo.appId }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">商户订单号</view>
					<view class="item-info"> {{ vdata.orderInfo.mchOrderNo }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">支付订单号</view>
					<view class="item-info"> {{ vdata.orderInfo.platformOrderNo }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">渠道订单号</view>
					<view class="item-info"> {{ vdata.orderInfo.channelOrderNo }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">分账状态</view>
					<view class="item-info">
						<text v-if="vdata.orderInfo.divisionState == 0" color="blue">未发生分账</text>
						<text v-else-if="vdata.orderInfo.divisionState == 1" color="orange">待分账</text>
						<text v-else-if="vdata.orderInfo.divisionState == 2" color="red">分账处理中</text>
						<text v-else-if="vdata.orderInfo.divisionState == 3" color="green">任务已结束</text>
						<text v-else color="#f50">未知</text>
					</view>
				</view>

				<view class="detail-item">
					<view class="item-title">顾客备注</view>
					<view class="item-info"> {{ vdata.orderInfo.buyerRemark }} </view>
				</view>
				<view class="detail-item">
					<view class="item-title">下单时间</view>
					<view class="item-info"> {{ vdata.orderInfo.createdAt }} </view>
				</view>
			</view>
			<view class="detail-info">
				<view class="detail-item">
					<view class="item-title">订单金额</view>
					<view class="item-info"> ￥ {{ cal.cert2Dollar(vdata.orderInfo.amount) }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">手续费</view>
					<view class="item-info"> ￥ {{ cal.cert2Dollar(vdata.orderInfo.mchFeeAmount) }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">退款次数</view>
					<view class="item-info"> {{ vdata.orderInfo.refundTimes }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">退款金额</view>
					<view class="item-info"> ￥{{ cal.cert2Dollar(vdata.orderInfo.refundAmount) }} </view>
				</view>

				<view class="detail-item">
					<view class="item-title">实收金额</view>
					<view class="item-info">
						￥{{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount - vdata.orderInfo.mchFeeAmount) }}
					</view>
				</view>

				<view class="detail-button flex-center" hover-class="touch-button" hover-stay-time="150"
					@tap="printOrder"> 打印小票 </view>

				<!-- 不包含退款记录 && 支持退款 -->
				<!-- 包含退款记录时在列表内显示 -->
				<view v-if="isShowRefund() && vdata.refundCount <= 0" class="refund-button flex-center"
					hover-class="touch-button" hover-stay-time="150" @tap="toRefundPage">
					发起退款
				</view>

			</view>
		</view>

		<!-- 包含退款记录时， 需要展示退款记录。  -->
		<RefundCard v-show="vdata.refundCount > 0 " :orderInfo="vdata.orderInfo" ref="refundCardRef"
			@refund="toRefundPage" :refundBtn="isShowRefund()" @refRefundCountFunc="refRefundCountFunc" />
	</view>

	<JSinglePopup ref="singlePopupRef" activeColor="#FF5B4C" :list="vdata.singleList" />
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		req,
		reqLoad,
		API_URL_PAY_ORDER_LIST,
		$payOrderPrint
	} from '@/http/apiManager.js'
	import RefundCard from './components/RefundCard.vue'
	import {
		onPageScroll,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import cal from '@/commons/utils/cal.js'
	import datamap from '@/commons/utils/datamap.js'
	import infoBox from '@/commons/utils/infoBox.js'
	import ent from '@/commons/utils/ent.js'
	import go from '@/commons/utils/go.js'
	import emit from '@/commons/utils/emit.js'

	onPageScroll(() => {})

	const refundCardRef = ref()

	// 监听 更新事件 
	onUnload(() => uni.$off(emit.ENAME_REF_PAY_ORDER))
	uni.$on(emit.ENAME_REF_PAY_ORDER, function(data) {
		refData(vdata.orderInfo.payOrderId)
	})


	function refData(payOrderId) {

		vdata.singleList = [{
			label: '打印小票',
			value: 'print',
			fun: printOrder
		}, ]
		reqLoad.getById(API_URL_PAY_ORDER_LIST, payOrderId).then(({
			bizData
		}) => {
			vdata.orderInfo = bizData

			// 追加退款 
			if (isShowRefund()) {
				vdata.singleList.push({
					label: '订单退款',
					value: 'refund',
					fun: toRefundPage
				})
			}

			// 当不同状态， 可能没有此组件
			nextTick(() => {
				if (refundCardRef && refundCardRef.value) {
					refundCardRef.value.refList(vdata.orderInfo.payOrderId)
				}
			})
		})


	}

	onLoad((options) => {
		refData(options.payOrderId)
	})


	const vdata = reactive({

		singleList: [],

		orderInfo: {},

		refundCount: 0, // 退款记录 0条。 
	})

	const singlePopupRef = ref()

	function isShowRefund() {
		return (ent.has('ENT_PAY_ORDER_REFUND') && vdata.orderInfo.state === 2 && vdata.orderInfo.refundState !== 2)
	}

	// 去退款详情页
	function toRefundPage() {

		go.to('PAGES_REFUND_ORDER', {
			payOrderId: vdata.orderInfo.payOrderId
		})
	}

	// 订单打印
	function printOrder() {
		$payOrderPrint(vdata.orderInfo.payOrderId).then(bizData => {
			infoBox.showToast('打印指令已发送')
		});
	}

	function refRefundCountFunc(count) {
		vdata.refundCount = count;
	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		background: linear-gradient(135deg, rgba(255, 91, 76, 1) 60%, rgba(203, 41, 114, 1) 100%);

		.detail-main {
			// min-height: calc(100vh - 35rpx);
			min-height: 100vh;
			padding-bottom: 35rpx;
			border-radius: 0 0 60rpx 60rpx;
			background-color: $v-color-bgrey;
		}
	}

	.detail-header {
		background: url('/static/indexImg/user-bg.svg');
		padding-bottom: 32rpx;

		.detail-title {
			display: flex;
			padding: 0 50rpx;
			min-height: 160rpx;

			.title-img {
				flex-shrink: 0;
				margin-right: 30rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.money-wrapper {
				flex: 1;
			}

			.detail-money {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon-money {
					font-size: 26rpx;
				}

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.detail-number {
				margin-top: 20rpx;
				color: rgba(0, 0, 0, 0.5);
				font-size: 30rpx;
			}
		}
	}

	.detail-info {
		position: relative;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		width: 680rpx;
		box-sizing: border-box;
		border-radius: $J-b-r32;
		background-color: $J-bg-ff;

		.detail-button,
		.refund-button {
			margin: 20rpx 0 10rpx 0;
			height: 110rpx;
			font-size: 33rpx;
			font-weight: 500;
			color: #fff;
			border-radius: $v-b-r20;
			background: $jeepay-bg-primary;
		}

		.refund-button {
			margin-top: 30rpx;
			color: #ff5b4c;
			background: rgba(255, 91, 76, 0.1);
		}
	}

	.border-f2 {
		border-bottom: 2px dashed #f2f2f2;
	}

	.bdr-after::after,
	.bdr-before::before {
		content: '';
		display: block;
		position: absolute;
		bottom: -25rpx;
		z-index: 99;
		width: 50rpx;
		height: 50rpx;
		background-color: $v-color-bgrey;
		border-radius: 50%;
	}

	.bdr-after::after {
		left: -25rpx;
	}

	.bdr-before::before {
		right: -25rpx;
	}

	.touch-button {
		opacity: 0.5;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;

		.item-title {
			flex-shrink: 0;
			width: 180rpx;
			font-size: $J-f-size30;
			font-weight: 400;
			color: $J-color-t8c;
		}

		.item-info {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			text-align: right;
			font-size: $J-f-size30;
			font-weight: 400;
			word-break: break-all;

			.detail-dot {
				align-self: center;
				display: block;
				margin-right: 15rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #ff5b4c;
			}
		}
	}
</style>